import { ChangeEvent, useEffect, useState } from "react"
import { Input, Space, Button, message } from 'antd';
import style from "./login.module.scss"
import initLoginBg from "./init.ts"
import './login.less'
import { useNavigate } from "react-router-dom"
import { CaptchaAPI, LoginAPI } from "@/request/api";
const view = () => {
    let navigateTo = useNavigate()
    // 加载完这个组件之后 加载背景 
    useEffect(() => {
        initLoginBg();
        window.onresize = function () { initLoginBg() }

        getCaptchaImg()
    }, [])
    // 获取用户输入 的信息
    const [usrenameVla, setUsernameVal] = useState("")
    const [passwordVla, setPasswordVal] = useState("")
    const [captchaVla, setCaptchaVal] = useState("")
    const [captchaImg, setCaptchaImg] = useState("")

    const usernameChange = (e: ChangeEvent<HTMLInputElement>) => {
        setUsernameVal(e.target.value)
    }
    const passwordChange = (e: ChangeEvent<HTMLInputElement>) => {
        setPasswordVal(e.target.value)
    }
    const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
        setCaptchaVal(e.target.value)
    }

    // 点击登录按钮的事件
    const gotoLogin = async () => {
        if (!usrenameVla.trim() || !passwordVla.trim() || !captchaVla.trim()) {
            message.warning("请输入完整信息!")
            return
        }
        // 发起登录请求
        let loginAPIRes = await LoginAPI({
            username: usrenameVla,
            password: passwordVla,
            code: captchaVla,
            uuid: localStorage.getItem("uuid") as string
        })

        if (loginAPIRes.code === 200) {
            message.success("登录成功")
            localStorage.setItem("lege-token", loginAPIRes.token)
            navigateTo("/page1")
            localStorage.removeItem("uuid")

        }
    }

    const getCaptchaImg = async () => {
        let captchAPIRes = await CaptchaAPI();
        if (captchAPIRes.code === 200) {
            setCaptchaImg("data:image/gif;base64," + captchAPIRes.img)
            localStorage.setItem("uuid", captchAPIRes.uuid)
        }
    }

    return (
        <div className={style.loginPage}>
            {/* 存放背景 */}
            <canvas id="canvas" style={{ display: "block" }}></canvas>
            {/* 登录盒子  */}
            <div className={style.loginBox + " loginbox"}>
                {/* 标题 */}
                <div className={style.title}>
                    <h1>帅哥专用的&nbsp;&nbsp;调用后台系统</h1>
                    <p>Strive Everyday</p>
                </div>
                {/* 表单部分 */}
                <div className="form">
                    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                        <Input placeholder="用户名" onChange={usernameChange} />
                        <Input.Password placeholder="密码" onChange={passwordChange} />
                        <div className="captchaBox">
                            <Input placeholder="验证码 " onChange={captchaChange} />
                            <div className={style.captchaImg} onClick={getCaptchaImg}>
                                <img height="38" src={captchaImg} alt="" />
                            </div>
                        </div>
                        <Button type="primary" block onClick={gotoLogin}> 登录 </Button>
                    </Space>
                </div>
            </div>
        </div>
    )
}

export default view 